<template>
	<view class="main">
		<!-- <back-fixed title="添加团队成员" style="back" urlBack='/pages/team/myTeam'></back-fixed> -->
		<search-box @mySearch="mySearch" top="0"></search-box>
		<view class="box">
			<empty-team text="未查询到相关成员" :emptyImg="searchEmpty" v-if="empty"></empty-team>
			<view v-for="value,key in list" :key="value.userId" v-if="!empty"
				:class="{'selected':value.check,'forb':value.isTeamUser}" @click="whickSelected(value,key)">
				<view class="list" >
					<view class="list_left">
						<view class="check">
							<view class="info">
								<small-avatar :nickName="value.nickName" :avatar="value.avatar" size="90"
									:sex="value.sex"></small-avatar>
								<view class="p-l-16">
									{{value.nickName}}
								</view>
								<view class="p-l-16" style="color: #999999">
									{{ phoneNumber(value.phonenumber)}}
								</view>
							</view>
						</view>
						<view class="">

						</view>
					</view>
					<view class="list_right">
						<u-image :src="value.isTeamUser ? exist : selected" width="50rpx" height="50rpx"
							v-show="value.check || value.isTeamUser"></u-image>
					</view>
				</view>
			</view>
			<view class="p-t-40" v-if="!empty">
				<u-loadmore :status="status" />
			</view>
		</view>

			<u-modal v-model="succ" :show-title="false" :content-style="{'fontWeight': 'bold'}" content="恭喜您已创建团队数字医生工作室"
				:confirm-text="contentSu" confirm-color="#4DC0D9" @confirm="confirmSucc">
			</u-modal>
			<u-modal v-model="succTwo" :show-title="false" :show-cancel-button="true" :content="contentSu" :content-style="{'fontWeight': 'bold'}"
				 confirm-color="#4DC0D9" @confirm="confirmSucc" @cancel="showTeamCancel" confirm-text="查看团队专属码" :cancel-style="{'borderRight':'1px solid #f8f8f8'}">
			</u-modal>
		<view class="sticky">
			<view class="my_button" :class="{'inactive':inactive}" @click="confirm">
				确认&nbsp;<span v-if="selectCount">({{selectCount}})</span>
			</view>
			<!-- <u-button  type="success">创建团队</u-button> -->
		</view>
		<u-modal v-model="showConfirmModal" :show-title="false" cancel-color="#333333" :show-cancel-button="true"
			confirm-color="#4DC0D9" :content-style="{color:'#333333'}" :content="content" @confirm="choose" :cancel-style="{'borderRight':'1px solid #f8f8f8'}"></u-modal>
	</view>
</template>

<script>
	import {
		getCorpAllUserInfo,
		teamUser
	} from '@/api/index.js'
	export default {
		data() {
			return {
				contentSu:'',
				teamId: '',
				succ: false, //保存信息成功后的弹窗
				succTwo:false,
				empty: false,
				searchEmpty: require('@/static/img/search_empty.png'),
				selected: require('@/static/img/Select_Team _Selected@2x.png'),
				unable: require('@/static/img/Members_unable.png'),
				able: require('@/static/img/Members_able.png'),
				exist: require('@/static/img/exist.png'),
				showConfirmModal: false,
				content: '确定要将所选用户添加至团队吗？',
				list: [
					// 	{
					// 	isTeamUser: false,
					// 	nickName: '龚明亮',
					// 	phonenumber: '159****1949',
					// 	avatar: '',
					// 	userId: '',
					// 	check: false
					// }
				],
				status: 'loadmore',
				pageNum: 1, //当前条目数
				totalCount: 0, //总条目数
				pageSize: 15, //每页总条数
				avg: 0, //总页数
				searchValue: '',
			}
		},
		onReachBottom() {
			//console.log(this.totalCount, this.avg, 'onReachBottom');
			if (this.pageNum >= this.avg) {
				this.status = 'nomore'
				return;
			}
			this.status = 'loading';
			this.pageNum = ++this.pageNum;
			this.getList()
			this.status = 'loading';
			if (this.pageNum == this.avg) this.status = 'nomore'
		},
		computed: {
			inactive() {
				const b = this.list.every(v => v.check == false)
				return b
			},
			selectCount() {
				const arrNumber = this.list.filter(v => v.check == true)
				//console.log(arrNumber);
				if (arrNumber.length < 1) {
					return ''
				} else {
					return arrNumber.length
				}
			},
			phoneNumber(number) {
				return (number) => {
					//135****5841
					if (number && number.length > 0) {
						return number.slice(0, 3) + '****' + number.slice(7, 11)
					}
					return number
				}
			}
		},
		onLoad(obj) {
			if (obj && obj !== undefined) {
				this.teamId = obj.teamId
				this.getList()
			} else {
				this.$u.toast('暂无teamId，无法查询到列表')
			}
			//this.empty = true
		},
		//onUnload() {
		//console.log('leave');
		//},
		//onBackPress(){
		//	console.log('实体按键返回')
		//},
		methods: {
			async getList() {
				let obj = {
					'teamId': this.teamId,
					'pageNum': this.pageNum,
					'pageSize': this.pageSize,
				}
				if (this.searchValue) {
					obj = {
						...obj,
						'searchValue': this.searchValue
					}
				}
				let res = await getCorpAllUserInfo(obj)
				if (res.rows.length < 1) {
					this.status = 'nomore'
					this.empty = true
					return
				} else {
					this.status = 'loading'
					this.empty = false
				}
				this.totalCount = res.total
				this.avg = Math.ceil(this.totalCount / this.pageSize)
				if (this.avg == 1) { //只有一页的时候，有时候不会触发下拉刷新
					this.status = 'nomore'
				}
				let arr = res.rows.map(v => {
					if(v.isSelect){
						v.check = true
					}else{
						v.check = false
					}
					return v
				})
				this.list.push(...arr)
			},
			clearPageStatus() {
				this.list = []
				this.status = 'loading';
				this.pageNum = 1 //当前条目数
				this.totalCount = 0 //总条目数
				this.avg = 0
			},
			mySearch(val) { //搜素按钮
				this.searchValue = val
				this.clearPageStatus()
				this.getList()
				//this.empty = true     //空列表
				//console.log(val); //
			},
			whickSelected(value, key) {
				console.log(value,key);
				if (this.list[key].isTeamUser) return
				this.list[key].check = !this.list[key].check
				
			},
			confirm() {
				const arr = this.list.filter(v => v.check == true)
				if (arr !== undefined) {
					if (arr.length == 1) { //添加一人
						this.showConfirmModal = true
						this.content = `确定要将“${arr[0].nickName}”添加至团队吗？`
						//this.$u.toast()
					} else if (arr.length > 1) { //添加多人
						this.showConfirmModal = true
						this.content = `确定要将所选用户添加至团队吗？`
						//this.$u.toast(`确定要将所选用户添加至团队吗？`)
					}
					//console.log(this.list,'list');
					//console.log(arr);
				}
				if (arr.length == 0) {
					this.$u.toast('请选择团队成员')
				}
			},
			showTeamCancel(){
				uni.navigateBack({
					delta:1
				})
			},
			goInfo(value) {
				this.$u.route('/pages/team/member')
			},
			async addmyTeam() {
				const arr = this.list.filter(v => v.check == true)
				let obj = {
					teamId: this.teamId,
					teamUserList: [
						//{userId:'',userName:''}
					]
				}
				obj.teamUserList = arr.map(v => {
					return {
						'userId': v.userId,
						'userName': v.nickName
					}
				})
				let res = await teamUser(obj)
				//console.log(res);
				if (res.code == 200) {
					this.$u.toast(res.msg)
					let selected = this.list.reduce((pre, val, index) => {
						if (val.isTeamUser) pre = pre + 1
						return pre
					}, 0)
					if(!res.data.basicQrCode){
						this.$u.toast('生成团队专属码失败！！')
						return
					}
					uni.setStorageSync('teamQr',res.data)
					//console.log(r,res,'5454');
					if (selected < 2) {
						this.contentSu = '查看您的团队专属码'
						this.succ = true
					} else {
						this.contentSu = '团队数字医生工作室使用成员已更新'
						this.succTwo = true
					}
					// return
				}else{
					this.$u.toast(res.msg,3000)
				}
				//console.log(res, 'addres');
			},
			choose() {
				//添加接口
				this.addmyTeam() //以上验证了不为空
				//this.$u.toast('添加成功')
			},
			confirmSucc() { //保存信息成功后跳转
				uni.navigateTo({
					url: '/pages/team/qr'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		// height: 100vh;
		// width: 100vw;
		// position: absolute;

		//background-color: #F8F8F8;
		.box {
			.forb {
				background: #F8F8F8;
			}

			padding: 75px 0 260rpx 0;

			.list {
				//height: 200vh;
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #E8E8E8;
				padding-bottom: 40rpx;
				padding-top: 20rpx;

				.list_left {
					.check {
						display: flex;
						align-items: center;

						.info {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #212121;
							line-height: 38rpx;

							.avatar {
								background-color: #4DC0D9;
								border-radius: 50%;
								width: 80rpx;
								height: 80rpx;
							}
						}
					}
				}

				.list_right {}
			}
		}

		.sticky {
			width: 100%;
			padding: 0 24rpx;
			position: fixed;
			z-index: 2;
			bottom: 0;
			padding-bottom: 80rpx;
			background-color: #FFFFFF;

			.my_button {
				background-color: #4DC0D9;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				padding: 20rpx 0;
				border-radius: 20rpx;
			}
		}

		.inactive {
			background-color: #A6DFEC !important;
		}
	}

	.selected {
		background-color: #F4FDFF;
	}
</style>